<template>
	<view class="signView">
		<u-navbar title="签到中心" :is-back="true" :is-fixed="false" :border-bottom="false"
			:background="{backgroundColor:'transparent'}" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>
		<view style="padding: 40rpx;">
			<view class="infoView flex flex_justify_between">
				<view class="fview uni-inline-item">
					<view class="sview">
						<image src="@/static/sign/jf.png"></image>
					</view>
					<view class="m_row_20 color_9">
						<view class="m_col_10">
							<span class="fs40 fw_b" style="color: #FE972E;">
								{{Math.floor(Math.random()*1000)}}
							</span>
							枚
						</view>
						<view>
							我的积分
						</view>
					</view>
				</view>
				<view class="fview uni-inline-item">
					<view class="sview">
						<image src="@/static/sign/rl.png"></image>
					</view>
					<view class="m_row_20 color_9">
						<view class="m_col_10">
							<span class="fs40 fw_b" style="color: #FE972E;">
								{{signNum}}
							</span>
							天
						</view>
						<view>
							本月签到
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="calendar" >
				<ss-calendar :checks="checks" @current-month-day="onSignIn" @prev-month-day="onPrev"
					@next-month-day="onNext" ref="calendar"/>
			</view>
		</view>
		<view class="bens x_center" @click="signIng">
			<image src="@/static/sign/ljqd.png"></image>
			<view style="margin-top: 10rpx;">
				你已累计签到{{signNum}}天，请继续加油~
			</view>
		</view>
		<alert :mode="4" v-model="maskshow" :maskparam="maskparam" @clickbtn1='offmask'>
		</alert>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sShow:false,
				maskshow: false,
				myScore: 100,
				signNum: Math.floor(Math.random()*50),
				checks: [],
				maskparam: {
					title: "",
					text: "恭喜您,签到成功",
					icon: "/static/sign/maskTop.png",
					icon2: "/static/sign/maskIcon.png",
					btn: ["确定"]
				},
			}
		},
		onLoad() {
		},
		onReady(){
			console.log("$refs", this.$refs.calendar);
		},
		onPullDownRefresh(){
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1500)
		},
		methods: {
			offmask() {
				console.log('offmask');
				this.maskshow = false
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				// 调用组件中获取数据的方法刷新数据和签到状态 this.$refs.calendar.signList(year,month)
				/* this.signIndex()
				this.getUserInfo() */
			},
			signIng() {
				this.maskshow = true
			},
			onSignIn(payload) {
				const {
					checked,
					year,
					month,
					day
				} = payload

				!checked && this.checks.push(`${year}-${month}-${day}`)

				console.log('onSignIn', payload)
			},
			onPrev(payload) {
				console.log('onPrev', payload)
			},
			onNext(payload) {
				console.log('onNext', payload)
			}
		}
	}
</script>

<style lang="scss">
	/* page,
	view {
		display: flex;
	} */
	[v-cloak] {
		display: none !important;
	}
	page {
		background-color: #fe5d20;
		// background-color: #d6d6d6; 
	}

	.signView {
		// height: 100vh;
		width: 100%;
		// padding: 40rpx;
		background-image: url(@/static/sign/sign.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.infoView {
			margin: 30rpx 0;
			margin-top: 38%;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx 40rpx;

			.fview {
				.sview {
					image {
						width: 85rpx;
						height: 85rpx;
					}
				}
			}
		}

		.line {
			width: 694rpx;
			height: 24rpx;
			background: linear-gradient(0deg, #FE6400 0%, #FE9910 47%, #FFCC87 100%);
			box-shadow: 0px 2px 10px 0px rgba(210, 61, 2, 0.59);
			border-radius: 12px;
			margin-left: -12rpx;
		}

		.calendar {
			// margin: 20rpx
			margin-top: -5rpx;
			width: 100%;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			//box-shadow: 0px 4px 18px 0px rgba(210, 61, 2, 0.82);
			//padding: 20rpx;
		}

		.bens {
			padding-bottom: 50rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 26rpx;
			image {
				width: 541rpx;
				height: 104rpx;
			}
		}
	}
</style>
